<template>
	<view class="balance">
		<view class="header">
			<view class="money">
				{{dataObj.balance || '0.00'}}<span class="unit">元</span>
			</view>
			<view class="tip">金币仅用于付费内容</view>
		</view>
		<view class="list">
			<view class="title">充值</view>
			<view class="item" :class="dataObj.index === idx ? 'selected' : ''" v-for="(item, idx) in dataObj.list" :key="item.id" @click="onSelectTap(idx)">
				<view class="price">{{item.price}}元</view>
				<view class="selling-price">售价{{item.sell}}元</view>
			</view>
		</view>
		<view class="btn" @click="onPostTap">立即充值</view>
		<view class="explain">
			<view class="title">充值说明</view>
			<view class="content">1. 充值金额不会过期、不支持退款、提现或转赠他人；</view>
			<view class="content">2. 因苹果政策，iOS平台和安卓平台的充值余额不支持跨平台使用。</view>
		</view>
	</view>
</template>

<script>
	import { requestErrorTip, getInfoData } from '@/common/tools.js';
	
	export default {
		data() {
			return {
				dataObj: {
					balance: 0,
					index: 0,
					list: [{
						id: 1,
						price: '0.01',
						sell: '0.01'
					}, {
						id: 2,
						price: '5',
						sell: '5.00'
					}, {
						id: 3,
						price: '10',
						sell: '10.00'
					}, {
						id: 4,
						price: '20',
						sell: '20.00'
					}, {
						id: 5,
						price: '50',
						sell: '50.00'
					}, {
						id: 6,
						price: '100',
						sell: '100.00'
					}, {
						id: 7,
						price: '200',
						sell: '200.00'
					}, {
						id: 8,
						price: '500',
						sell: '500.00'
					}]
				}
			}
		},
		onShow() {
			this.getData(); // 获取数据
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.getData();
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			// 充值项选择
			onSelectTap(index) {
				this.dataObj['index'] = index;
			},
			// 立即充值
			onPostTap() {
				// 非微信
				// #ifndef MP-WEIXIN
				const index = this.dataObj['index'];
				const money = this.dataObj['list'][index]['sell'];
				const navigateUrl = '/pages/order/pay-order?payment_type=2&money=' + money;
				uni.navigateTo({
					url: navigateUrl
				});
				// #endif
				
				// 微信
				// #ifdef MP-WEIXIN
				requestErrorTip('toast', '由于相关规范，IOS功能暂不可用');
				// #endif
			},
			// 获取数据
			getData() {
				// 从缓存中获取
				getInfoData((res) => {
					this.dataObj['balance'] = res['balance'];
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #FFFFFF;
	}
	.balance{
		padding: 0 36rpx;
		.header{
			padding: 36rpx 0 50rpx;
			text-align: center;
			border-bottom: 1rpx solid #EAEFF1;
			.money{
				line-height: 86rpx;
				font-size: 72rpx;
				font-weight: bold;
				color: #1A1A1A;
				.unit{
					font-size: 34rpx;
					margin-left: 4rpx;
					vertical-align: middle;
				}
			}
			.tip{
				line-height: 36rpx;
				font-size: 24rpx;
				color: $color-common;
			}
		}
		.list{
			font-size: 0;
			padding-top: 36rpx;
			padding-bottom: 44rpx;
			.title{
				line-height: 40rpx;
				font-size: 28rpx;
				font-weight: bold;
				color: #373737;
				margin-bottom: 24rpx;
			}
			.item{
				box-sizing: border-box;
				display: inline-block;
				width: 214rpx;
				height: 128rpx;
				text-align: center;
				border: 1rpx solid $color-common;
				border-radius: 12rpx;
				padding-top: 26rpx;
				margin-bottom: 18rpx;
				margin-right: 18rpx;
				// &:nth-child(3n + 1) {
				// 	margin-right: 0;
				// }
				.price{
					line-height: 40rpx;
					font-size: 30rpx;
					font-weight: bold;
					color: #1A1A1A;
					margin-bottom: 4rpx;
				}
				.selling-price{
					line-height: 30rpx;
					font-size: 22rpx;
					color: #7F7F7F;
				}
			}
			.selected{
				background-color: rgba($color: $color-common, $alpha: 0.1);
				.price, .selling-price{
					color: $color-common;
				}
			}
		}
		.btn{
			height: 82rpx;
			line-height: 82rpx;
			font-size: 32rpx;
			color: #FFFFFF;
			text-align: center;
			background-color: $color-common;
			border-radius: 41rpx;
			margin-bottom: 62rpx;
		}
		.explain{
			padding-top: 36rpx;
			border-top: 1rpx solid #EAEFF1;
			.title{
				line-height: 40rpx;
				font-size: 30rpx;
				font-weight: bold;
				color: #373737;
				margin-bottom: 30rpx;
			}
			.content{
				line-height: 36rpx;
				font-size: 24rpx;
				color: #7F7F7F;
				margin-bottom: 28rpx;
			}
		}
	}
</style>
